<template>
  <article
    id="model-card"
    class="whitespace-nowrap overflow-hidden"
    flex="~ col justify-center items-center"
  >
    <div id="model-img">
      <Transition>
        <img
          v-if="Array.isArray(data.icon_urls) && data.icon_urls.length && loaded"
          :src="data.icon_urls[0]"
          :class="{'active': selected}"
          alt="模型图标"
        />
        <SpellaiShimmer v-else class="transform-scale-80 absolute" />
      </Transition>
    </div>
    <div class="font-600 px-1 text-3.5 text-nowrap w-full overflow-hidden text-ellipsis" :class="{'text-primary': selected}">
      {{ data.model_name }}
    </div>
  </article>
</template>

<script setup lang="ts">
import SpellaiShimmer from '@/components/SpellaiShimmer.vue'
import type { Model } from '@/service/types'
const props = defineProps<{
  data: Model,
  selected:boolean
}>()
const loaded = ref(false)
onBeforeMount(() => {
  new Promise((resolve) => {
    const image = new Image()
    image.src = props.data.icon_urls ? props.data.icon_urls[0] : ''
    if (image.complete) {
      loaded.value = true
      resolve(true)
      return
    }
    image.onload = () => {
      loaded.value = true
      resolve(true)
    }
    image.onerror = () => {
      loaded.value = true
      resolve(true)
    }
  })
})
</script>

<style scoped>
#model-card {
  #model-img {
    display: flex;
    flex: 1;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background-color: #666666;
    overflow: hidden;
    border-radius: 0.5rem;

    img {
      border-radius: 0.5rem;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.active {
   border: 2px solid var(--color-primary);
}
.v-enter-active,
.v-leave-active {
  opacity: 1;
  transition: all 0.4s linear;
  will-change: opacity;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  will-change: opacity;
}
</style>
